import { lazy } from "react";
import { createBrowserRouter, Navigate } from "react-router-dom";
const Login = lazy(() => import("../assets/login/index"));
const Layout = lazy(() => import("../assets/layout/index"));
const Home = lazy(() => import("../assets/home/index"));
const User = lazy(() => import("../assets/user/index"));
const Info = lazy(() => import("../assets/user/children/Info"));
const Order = lazy(() => import("../assets/order/index"));
const Error = lazy(() => import("../assets/error/index"));

const routerAll = {
  home: { path: "/home/index", element: <Home />, title: "首页" },
  user: {
    path: "/home/user",
    element: <User />,
    title: "用户",
    children: [{ path: "/home/user/info", element: <Info />, title: "详情" }],
  },
  order: { path: "/home/order", element: <Order />, title: "订单" },
};

const roles = {
  admin: {
    pageRouter: ["home", "user", "order"],
    btns: {
      home: ["add", "edit", "delete"],
    },
  },
  user: {
    pageRouter: ["home"],
    btns: {
      home: ["add"],
    },
  },
};
const username = localStorage.getItem("username") || "user";
const { pageRouter, btns } = roles[username];

export const routers = pageRouter.map((item) => {
  return {
    ...routerAll[item],
    loader() {
      return btns[item];
    },
  };
});

const router = createBrowserRouter([
  { path: "/", element: <Navigate to="/home/index" /> },
  { path: "/login", element: <Login /> },
  { path: "*", element: <Error /> },
  { path: "/home", element: <Layout />, children: routers },
]);
export default router;
